<template>
  <div class="about">
    <el-container class="contain">
      <el-aside width="270px" class="asidee">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />BLAZER甄选运营平台
        </div>
        <el-menu
          :unique-opened="true"
          router
          :default-active="df"
          background-color="#000"
          style="margin-top: 10px"
          text-color="#fff"
        >
          <template v-for="(item, index) in munulist1" :key="index">
            <el-sub-menu :index="index" v-if="item.children.length !== 0">
              <template #title>
                <i class="el-icon-message"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                :index="children.path"
                @click="hanselect(children)"
                v-for="(children, path) in item.children"
                :key="children.name"
              >
                {{ children.name }}
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item
              :index="item.path"
              :key="indexj"
              @click="hanselect(item)"
              v-if="item.children.length == 0"
            >
              {{ item.name }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="headeer">
            <div>{{ bread }}</div>
            <div>
              <el-button @click="sx" :icon="Refresh" circle />
              <el-button @click="qp" :icon="FullScreen" circle />
              <img :src="avatar" class="aca" alt="" />
              <el-dropdown>
                <div class="nameub">{{ name }}</div>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>

                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view v-if="isRouterActive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import screenfull from "screenfull";
import instance from "../assets/axiosinstance";
import { useRouter } from "vue-router";
import {
  Refresh,
  FullScreen,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { nextTick, onMounted, provide, ref } from "vue";
const isRouterActive = ref(true);
const avatar = window.localStorage.getItem("avator");
const router = useRouter();
const name = window.localStorage.getItem("name");
const sx = () => {
  isRouterActive.value = false;
  nextTick(() => {
    isRouterActive.value = true;
  });
};
const df=ref("index1");
const logout = () => {
  window.localStorage.clear();
  router.push({
    path: "/",
  });
};
const qp = () => {
  isFullflag.value = !isFullflag.value;
  if (!screenfull.enabled) {
  }
  screenfull.toggle();
};
const bread = ref("首页");
const menuList = ref([
  {
    name: "首页",
    path: "index1",
    index: "0",
    children: [],
  },
  
  {
    name: "权限管理",
    path: "Acl",
    index: "2",
    children: [
      {
        name: "用户管理",
        path: "User",
      },
      {
        name: "角色管理",
        path: "Role",
      },
      {
        name: "菜单管理",
        path: "Permission",
      },
    ],
  },
  {
    name: "商品管理",
    path: "Product",
    index: "4",
    children: [
      {
        name: "品牌管理",
        path: "Trademark",
      },
      {
        name: "属性管理",
        path: "Attr",
      },
     
    ],
  },
]);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const hanselect = (e) => {
  console.log(e);
  bread.value = e.name;
  window.localStorage.setItem("path",e.path);
 
};
const munulist1 = ref([]);
const isFullflag = ref("false");
const getmenu = async () => {
  const res1 = JSON.parse(window.localStorage.getItem("roles"));



 
    munulist1.value = menuList.value;
  
  // menuList.value.forEach((el) => {

  //   if (el.children.length !== 0) {
  //     el.children.forEach((el2, index) => {
  //       console.log(el2);
  //       console.log(res1.data.routes.indexOf(el2.path), el2.name);
  //       if (res1.data.routes.indexOf(el2.path) == -1) {
  //         console.log("1121");
  //         el.children.splice(index, 1);
  //       }
  //     });
  //   }
  // });

  console.log(menuList.value);
};
onMounted(() => {
  getmenu();
   df.value=window.localStorage.getItem("path")
  window.addEventListener("fullscreenchange", (e) => {
    if (screenfull.isFullscreen) {
      isFullflag.value = true;
    } else {
      isFullflag.value = false;
    }
  });
  if (!window.localStorage.getItem("token")) {
    router.push({
      path: "/",
    });
  }
});
</script>
<style>
.nameub {
  line-height: 31px;
}
.el-menu {
  border-right: 0px !important;
}
.aca {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
  margin-left: 10px;
}
.headeer {
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header {
  padding: 0px !important;
}
.asidee {
  background: #000;
}
.logo img {
  width: 40px;
  vertical-align: middle;
  margin-right: 10px;
  height: 40px;
}
.logo {
  width: 100%;
  height: 50px;
  padding: 15px;
  color: #fff;
  font-size: 20px;
  box-sizing: border-box;
}
.contain {
  width: 100%;
  height: 100%;
}
.about {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
